<html>
	<head>
	<meta charset="utf-8">
	<link href="../style/main_table.css" type=text/css rel=stylesheet>
     <script src="../js/vue.min.js"></script>
	 <script src="../js/axios.js"></script>
    </head>
  
<body>
	   <!--要有这个挂载点-->
        <div id="app2">

        <table width="100%"  border="0"   align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../images/main_01.gif" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="../images/main_02.gif" width="560" height="6"></td>
          <td width="10"><img src="../images/main_03.gif" width="6" height="6"/></td>
       </tr>
        <tr bgcolor="#F0F0F0">
          <td colspan="3" background="../images/bg.gif" bgcolor="#F0F0F0" class="TABLE">
		  <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1" >
              <tr>
                <td background="../images/main_title_bg1.gif">
				<table width="100%"  border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="1%"><img src="../images/dot9.gif" width="14" height="14"/></td>
                    <td width="99%">合同信息输入springboot+mybatis </td>
                  </tr>
                </table>
				</td>
              </tr>
              <tr><td>
   
   


             <table border=0 width=100%>
                <tr><td>基站名称:
                <input type=text  size=15 v-model="jzmc"/></td>
                <td> 区域：
				<select  v-model="quyu_id"> 
				   <option value="">---请选择---</option>
                	<option v-for="option in quyulist" v-bind:value="option.id">
                	  {{option.name}}
                	</option>	
                </select>
                </td>
                <td> 业主电话：
                <input type=text  size=15 v-model="yzdh"/>
                <input type=button value="查询"   v-on:click="getdataList">&nbsp;
                <input type=reset  value="清空"   v-on:click="resetfun">
                <input type=button value="增加"   onclick="window.location='add.html'">
                <input type=button value="批量删除"  @click="delALLData">
               </table>              
                </td></tr>
     
              <tr>
                <td height="20" class="TABLE5"><strong></strong></td>
              </tr>
              <tr><td width="100%" class="TABLE5">
                <table class="table1" border=0  width="100%">
                  <tr align="center">
                    <td  nowrap width="5%" height="20" class="TD_title1">
					<input type="checkbox" @click="selectAll" v-model='checkedALL'/>全选 
					</td>
                    <td  nowrap width="10%" height="20" class="TD_title1"><strong>基站名称</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>合同</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>期别</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>区域</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>镇区</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>面积(M2)</strong></td>
                    <td  nowrap width="20%" class="TD_title1"><strong>地址</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>业主姓名</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>业主电话</strong></td>
                    <td  nowrap width="10%" class="TD_title1"><strong>操作</strong></td>
                  </tr>
                  
                 
                 
                 <!--加入数据开始:tr中不能再嵌套tr:否则报vue中items没有定义--> 
                 <tr v-for="items  in datalist"  class='MenuItem'>   
	                  <td align="center" nowrap>
	                 <!--将每一个checkbox控件绑定到一个数组：选中的话，则其值就会自动存入到数组中-->
	                  <input type="checkbox"  v-model="checkList" :value="items.id"/></td>
	                  <td  align="center"  class="TD2" nowrap>{{items.jzmc}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.hetong}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.qibiename}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.quyuname}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.zhenquname}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.mianji}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.dizhi}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.yzmc}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.yzdh}}</td>
	                  <td  align="center"  class="TD2" nowrap>
	  
					  <input type="button" value="删除" @click="del(items.id)"/>
					  <input type="button" value="修改" @click="modify(items.id)" />
	                  </td>
	                </tr>

                </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="../images/main_05.gif" width="6" height="6"/></td>
          <td bgcolor="#A3A3A3"><img src="../images/main_06.gif" width="560" height="6"/></td>
          <td><img src="../images/main_07.gif" width="6" height="6"/></td>
        </tr>
		<!--获取后台操作的信息-->
		<tr>
		<td colspan=9 v-model="returnmsg"><font color=red>{{returnmsg}}</font></td>
      </table>
	  
	  <input type=hidden  id="id88" value="55"  v-model="id"> <!--去修改页面传参数用-->
	  
</div>

</body>
</html>



<script>
     var app2 =new Vue({
            el:'#app2',   //挂载点
            data:{
				id:'',
                jzmc:'',
				yzdh:'',
				quyu_id:'',
                quyulist:[],
				datalist:[],
                checkedALL:false,//全选框
                checkList:[], //全选反选
                buttonname: "保存修改数据",
				returnmsg:'', //增加删除修改的返回信息
			},
            //钩子方法：创建页面时就调用获取数据显示
            created: function (){
			    this.getquyuList(); //获取区域数据，下拉框中去显示
                this.getdataList(); //获取合同表数据，主页面显示
            },



            methods: {
				//发get请求获取区域数据，下拉框中去显示
				getquyuList:function () {
				  axios.get('http://localhost:8044/test/quyuControl/queryquyu').
					then(function (response){
				        var arr=response.data; //获取后台json数据
				        app2.quyulist=arr; //将json数据赋给vue中变量quyulist
				    }).catch(function (error) {
				          alert(error);
				    })
				},
                //发get请求获取合同表数据，主页面显示
                getdataList:function () {
                  axios.get('http://localhost:8044/test/hetongControl/queryhetong?jzmc='+this.jzmc+'&quyu_id='+this.quyu_id+'&yzdh='+this.yzdh).
					then(function (response){
                        var arr=response.data; //获取后台json数据
                        app2.datalist=arr; //将json数据赋给vue中变量datalist
						//alert(app2.datalist[0].id);
						//alert(app2.datalist[0].jzmc);
						//alert(app2.datalist[0].hetong);
                    }).catch(function (error) {
                          alert(error);
                    })
                },
				
				//发get请求删除数据
                del:function (e) {
                    axios.get('http://localhost:8044/test/hetongControl/deletehetong?id='+e)
                        .then(function (response) {
                            app2.getdataList();
							//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
							app2.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
                        }).catch(function (error) {
 
                    })
                },
				
				
				modify:function(id){
				  this.id=id; //将修改数据的id赋给vue变量id:因为绑定了隐藏控件。给下个页面获取值 
				  window.location.href="update.html?id="+id;
				},
				
				
				//对应清空按钮：清除查询条件
				resetfun:function(){
					this.jzmc='';
					this.yzdh='';
					this.quyu_id='';
					app2.getdataList(); //重新请求数据
				},
				 //选中删除
				delALLData:function(){
						axios.get('http://localhost:8044/test/hetongControl/deletebach?mycheckbox='+this.checkList)
							.then(function (response) {
								app2.getdataList(); //重新请求数据
								//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
								app2.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
							}).catch(function (error) {
 
						})
				},
				
				
				//全选
				selectAll(event){
				  if (!event.currentTarget.checked) {
				   this.checkList = [];
				  } else { //实现全选
				   this.checkList = [];
				   this.datalist.forEach((item, i) =>{
					   //将所有的checkbox绑定的值，填回去，则该checkbox选中
					this.checkList.push(item.id);
				   });
				  }
				 }
			  }
		});

		</script>